<template>
  <div ref="chartBox" class="chart"></div>
</template>

<script setup lang="ts">
import { Column } from '@antv/g2plot';
import { onMounted, ref } from 'vue';

const chartBox = ref();
let columnChart: Column | null = null;

onMounted(() => {
  initChart();
})

const initChart = () => {
  const data = [
    { title: '一厂', name: '产品损益', count: 58 },
    { title: '复合厂', name: '产品损益', count: 58 },
    { title: '裱涂厂', name: '产品损益', count: 58 },
    { title: '离型纸厂', name: '产品损益', count: 58 },
    { title: '二厂', name: '产品损益', count: 88 },
    { title: '一厂', name: '订单损益', count: 58 },
    { title: '复合厂', name: '订单损益', count: 88 },
    { title: '裱涂厂', name: '订单损益', count: 58 },
    { title: '离型纸厂', name: '订单损益', count: 38 },
    { title: '二厂', name: '订单损益', count: 58 },
  ]

  columnChart = new Column(chartBox.value, {
    data,
    isGroup: true,
    xField: 'title',
    yField: 'count',
    seriesField: 'name',
    color: ['#FFBB00', '#00A554'],
    marginRatio: 0.2,
    columnWidthRatio: 0.3,
    xAxis: {
      tickLine: {
        length: 0
      }
    },
    yAxis: {
      min: 0,
      max: 100,
      tickInterval: 20,
      label: {
        formatter: (value: string) => `${value}w`
      }
    },
    legend: {
      position: 'top',
      itemName: {
        style: {
          fill: '#ffffff',
        },
      },
      marker: (data: string) => {
        if (data == '产品损益') {
          return {
            symbol: 'circle',
            style: { fill: '#fff', stroke: '#FFBB00', lineWidth: 2, r: 3 }
          }
        } else {
          return {
            symbol: 'circle',
            style: { fill: '#fff', stroke: '#00A554', lineWidth: 2, r: 3 }
          }
        }
      }
    },
  });

  columnChart.render();
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>